<template>
  <div id="views">
    <div class="sec1 paddinglrtb">
      <p class="login">
        <span id='seenotice' v-if="notice && notice.length > 0">
          <img src="../../common/imgs/noticetitle.png" alt="公告">
          <swiper :options="swiperNotice" ref="Swiper2" v-if='notice.length>0'>
            <swiper-slide class="swiper-slide games" v-for="(item,index) in notice" :key="index">
              <router-link :to='{ path:"/announcement_detail",query:{content:item.content} }' class="tonotice">{{item.title}}</router-link>
            </swiper-slide>
          </swiper>
          <router-link class="seeMore" to='/announcement_list'>更多</router-link>
        </span>
        <img src="../../common/imgs/setting.png" class="settingicon hoverhand" @click="setting" alt="设置">
      </p>
      <div id="swipercontainer" style="border-radius: 0.04rem;overflow:hidden;">
        <swiper :options="swiperOption" ref="mySwiper" v-if='swiperData.length>0'>
          <swiper-slide class="swiper-slide games" v-for="(item,index) in swiperData" :key="index" >
            <a v-if="item.url.indexOf('http') != -1" :href="item.url" :style="{background:'url('+item.pic+')',
             'background-size':'cover','background-position':'center center','background-repeat': 'no-repeat'}" target="_blank">
            </a>
            <a v-if="item.url.indexOf('http') == -1" href="javascript:void 0;" :style="{background:'url('+item.pic+')',
             'background-size':'cover','background-position':'center center','background-repeat': 'no-repeat'}">
            </a>
          </swiper-slide>
          <!-- 以下控件元素均为可选 -->
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
      <div class="tabbar flexStyle spaceBet">
        <router-link to="/my_power">
          <p><img src="../../common/imgs/index_iconb.png" alt="我的算力"></p>
          <p>我的算力</p>
        </router-link>
        <router-link to="/my_account">
          <p><img src="../../common/imgs/index_iconc.png" alt="我的账户"></p>
          <p>我的账户</p>
        </router-link>
        <router-link to="/power_product">
          <p><img src="../../common/imgs/power_product.png" alt="算力产出"></p>
          <p>算力产出</p>
        </router-link>
        <a href="javascript:void 0;" @click="openWin('/my_banks_coinsaddress')">
          <p><img src="../../common/imgs/index_icona.png" alt="银行卡"></p>
          <p>银行卡</p>
        </a>
      </div>
      <div class="tabbar flexStyle spaceBet tabbar2">
        <a href="javascript:void 0;" @click="openWin('/recharge')">
          <p><img src="../../common/imgs/recharge_index.png" alt=""></p>
          <p>充值</p>
        </a>
        <a href="javascript:void 0;" @click="openWin('/cash_withdraw')">
          <p><img src="../../common/imgs/getCashIcon_index.png" alt=""></p>
          <p>提现</p>
          <!--          <img src="../../common/imgs/get_cash.png" alt="提现">-->
        </a>
        <router-link to="/coupon">
          <p><img src="../../common/imgs/index_conpun.png" alt="优惠券"></p>
          <p>优惠券</p>
        </router-link>
        <router-link to="/about_us">
          <p><img src="../../common/imgs/about_index.png" alt="关于我们"></p>
          <p>关于我们</p>
        </router-link>
      </div>
<!--      <div class="money">-->
<!--        <a href="javascript:void 0;" @click="openWin('/cash_withdraw')">-->
<!--          <img src="../../common/imgs/get_cash.png" alt="提现">-->
<!--        </a>-->
<!--        <a href="javascript:void 0;" @click="openWin('/recharge')">-->
<!--          <img src="../../common/imgs/rechargeicon.png" alt="充值">-->
<!--        </a>-->
<!--      </div>-->
      <div class="share">
        <img src="../../common/imgs/shareicon.png" alt="分享" class="hoverhand" id="sharecopy" :data-clipboard-text="invitedUrl" @click="shareLink">
      </div>
    </div>
    <p id="selPowerType" class="flexStyle spaceAround">
      <span class="hoverhand" :class="powerType === 0 ? 'active':''" @click="selPower(0)"><span>经典算力</span></span>
      <span class="hoverhand" :class="powerType === 1 ? 'active':''" @click="selPower(1)"><span>加速产出算力</span></span>
      <span class="hoverhand" :class="powerType === 2 ? 'active':''" @click="selPower(2)"><span>IPFS</span></span>
    </p>
    <div class="powerList" id="powerList">
      <ul class="listbox" v-if="powerType === 0">
        <!--列表1-->
        <li v-for="(item,index) in machine" class="oneDrug">
          <div>
            <div class="listLeft">
              <p class="powerName">
                <img src="../../common/imgs/danwa.png" alt="单挖" v-if="item.bhp_power == 0" class="nameLogo middle">
                <img src="../../common/imgs/shuangwa.png" alt="双挖" v-if="item.bhp_power > 0" class="nameLogo middle">
                {{item.name}}
              </p>
              <p class="drugTime">开挖时间：{{item.time_income}}</p>
              <p class="unit">
                <span>单份BTC算力：{{item.base_power}}T{{item.more_power_percent > 0 ? '+'+item.more_power_percent+'%' : '' }}</span>
                <span>
                  单份金额:
                  <span v-for="(curPay , curIndex ) in item.good_deposit" v-if="curPay.pay_currency === 'CNY'">
                    {{Number(curPay.goods_deposit)}}{{curPay.pay_currency}}
                  </span>
                  <span v-for="(curPay , curIndex ) in item.good_deposit" v-if="curPay.pay_currency === 'USDT'">
                    / {{Number(curPay.goods_deposit)}}{{curPay.pay_currency}}
                  </span>
                </span>
                <span v-if="item.bhp_power && item.bhp_power > 0">单份BHP参配算力:{{item.bhp_power}}T</span>
              </p>
            </div>
            <div class="listRight" v-if="item.num_left > 0">
              <router-link :to="{ path: '/ordinaryDetail', query: {machine_id: item.machine_id}}" class="rentBtn" v-if="item.bhp_power == 0">立即下单</router-link>
              <router-link :to="{ path: '/doubleDetail', query: {machine_id: item.machine_id}}" class="rentBtn" v-if="item.bhp_power > 0">立即下单</router-link>
<!--              <a href="javascript:void  0;" v-if="item.bhp_power > 0" @click="openDialogOrdinary({path:'/ordinaryDetail' , query:{machine_id: item.machine_id}})" class="rentBtn" >立即下单</a>-->

              <!--单挖-->
              <!--<router-link :to="{ path: '/place_order', query: {machine_id: item.machine_id}}" class="rentTwoDrug" v-if="item.type == 1">立即下单</router-link>-->
              <!--双挖-->
            </div>
            <img src="../../common/imgs/sellover.png" alt="售罄" class="sellOver" v-if="item.num_left <= 0">
          </div>
        </li>
      </ul>
      <ul class="listbox2" v-if="powerType === 1">
        <!--列表2-->
        <li v-for="(item,index) in machine2" >
          <div>
            <div class="listLeft">
              <p class="powerName">
                <img src="../../common/imgs/danwa.png" alt="单挖" v-if="item.bhp_power == 0" class="nameLogo middle">
                <img src="../../common/imgs/shuangwa.png" alt="双挖" v-if="item.bhp_power > 0" class="nameLogo middle">
                {{item.name}}
              </p>
              <p class="drugTime">开挖时间：{{item.time_income}}</p>
              <p class="unit">
                <span>
                  单份合约算力：{{item.base_power}}T{{item.more_power_percent > 0 ? '+'+item.more_power_percent+'%' : '' }}
                </span>
                <span>
                  单份金额: {{item.pays.CNY.price}}<span class="unit"> CNY</span>
                  <span v-if="item.pays.USDT">
                    /{{item.pays.USDT.price}}<span class="unit"> USDT</span>
                  </span>
                </span>
                <span v-if="Number(item.bhp_power) > 0">单份BHP参配算力：{{item.bhp_power}}T</span>
              </p>
            </div>
            <div class="listRight" v-if="item.num_left > 0">
              <router-link v-if="item.bhp_power == 0" :to="{ path:  '/power_introduce', query: {machine_id: item.machine_id , cny:item.pays.CNY.price , usdt : item.pays.USDT.price}}" class="rentBtn">
                立即下单
              </router-link>
              <a  class="rentBtn" href="javascript:void  0;" v-if="item.bhp_power > 0" @click="openDialog({path: '/power_introduce',query:{machine_id:item.machine_id,cny:item.pays.CNY.price,usdt:item.pays.USDT.price}})">立即下单</a>
            </div>
            <img src="../../common/imgs/sellover.png" alt="售罄" class="sellOver" v-if="item.num_left <= 0">
          </div>
        </li>
      </ul>
      <p class="notList" v-if="notMachine">
        <img src="../../common/imgs/not_neworder.png" alt="">
      </p>
      <p class="loadToast" v-if="showLoad">{{loadToastInfo}}</p>
    </div>
    <dia-log ref="dl" v-bind:msg="safeInfo" @confirm="sure()" @cancel="cancel()"/>
    <dialog-four ref="dl2" title="提示" confirmBtn="我知道了"/>
  </div>
</template>

<script>
  import {postLogout, indexData, ifNeedRechargeVerfy , isRelNameVerify , noticeList , indexData2 , bhpayMes , ipfsList} from '../../http/api';
  // import store from '../../store/store';
  import {swiper, swiperSlide} from 'vue-awesome-swiper';
  import 'swiper/dist/css/swiper.css';

  export default {
    name: 'entrance',
    data() {
      return {
        msg: '欢迎来到人人矿场',
        introduce: '登录后首页',
        notice: null,//提示公告
        loadToastInfo: '加载中...',/*列表加载提示信息*/
        // showsetting: false,/*是否显示设置按钮*/
        invitedUrl: '',//分享链接
        machine: [],/*矿机列表1 data*/
        machine2: [],/*矿机列表2*/
        page: 0,/*当前页数*/
        totalPage: 1,/*总页数*/
        swiperData: [],/*轮播图片*/
        notMachine : false,//是否显示空列表提示图片
        swiperOption: {
          autoplay: {
            disableOnInteraction: false, //用户操作后是否禁止自动循环
            delay: 3000 //自自动循环时间
          }, //可选选项，自动滑动
          speed: 600, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
          loop: true, //循环切换
          grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
          autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
          // scrollbar: '.swiper-scrollbar',
          mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
          observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            // 自定义分页器， bulletClass 是常规的分页名字， bulletActiveClass是active时候的名字
            bulletClass: 'my-bullet',
            bulletActiveClass: 'my-bullet-active'
          }
        },
        swiperNotice: {
          direction: 'vertical',
          autoplay: {
            disableOnInteraction: false, //用户操作后是否禁止自动循环
            delay: 3000 //自自动循环时间
          }, //可选选项，自动滑动
          speed: 600, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
          loop: true, //循环切换
          grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
          autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
          observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
        },
        screenheight: 0,
        availHeight: 0,
        innerheight: 0,
        doc_clineheight: 0,
        safeInfo: '为保障您的账户安全，操作之前请先进行实名认证',//实名/充值校验，安全提示文字
        verFyCode: null , //是否充值校验的类型 // 1已实名 ， 3新手未下单，弹窗提示实名(不用必须去实名)   2未实名（必须实名）
        relNamePass : null ,//实名认证: 0 未通过（必须去实名）， 1 已通过， -1 审核中  2未实名审核
        goPage:'',//点击需要实名的连接
        showLoad : true,//显示 加载提示
        userName : '',//用户真实姓名
        userIdCard : '',//用户身份证号
        powerType : 0,//选择矿机类表类型
        twoDragMcDetail : '',
      }
    },
    components: {
      swiper,
      swiperSlide,
      DiaLog : resolve => { require(['../../components/dialog'], resolve) },
      DialogFour : resolve => { require(['../../components/DialogFour'], resolve) },
    },
    mounted() {
      let thiz = this;
      let https = [
        thiz.loadlist(),
        noticeList({noLoading: true , type : 1 , pageSize : 1000 ,release_location : 1}).then(res => {
          if (res.code == 200) {
            thiz.notice = res.data.list;
          }
        })
      ];
      // require('../../common/js/toast').toast('复制')
      thiz.loading();
      Promise.all(https).then(res => {
        thiz.closeLoading();
        // require('../../common/js/meiQia').initMeiQia();
      });
      let inviter_code = this.getUrlKey('inviter_code') || this.$store.state.inviter_code;
      console.log('入口inviter_code' , inviter_code);
      this.$store.commit('inviter_code' , inviter_code);
    },
    methods: {
      loadlist( notloading ) {
        /*加载经典BTC列表*/
        let thiz = this;
        let notLoading = notloading === false ? false : true;
        thiz.loadToastInfo = '加载中...';
        thiz.notMachine = false;
        thiz.showLoad = true;
        if(thiz.powerType === 0){
          thiz.machine = '';
          let param = {
            noLoading : notLoading,
            return_type : 1
          };
          return indexData(param).then(res => {
            if(res.code == 200){
              let data = res.data;
              let swiperData = data.banner;
              // thiz.for(swiperData , function ( item , index ) {
              //   let newimg = new Image();
              //   newimg.src = item.pic;
              //   newimg.onload = function(){
              //     swiperData[index] = item;
              //   };
              // });
              thiz.swiperData = swiperData;//轮播图片
              let machine = data.machine;
              thiz.for(machine , (item , index) => {
                machine[index].base_power = Number(machine[index].base_power);
              });
              thiz.machine = machine;//矿机列表
              thiz.invitedUrl = `${data.invite_uri}?inviter_uid=${thiz.$store.state.uid}`;//邀请链接
              thiz.$store.commit('downloadUrl', data.down_uri);//提交下载地址到store
              let machineLen = thiz.machine.length;
              if( machineLen === 0 ){
                thiz.notMachine = true;
                thiz.showLoad = false;
              }
              if( machineLen > 0 ){
                thiz.loadToastInfo = '到底了...';
              }
            }
          }).catch(err => {
            thiz.loadToastInfo = '到底了...';
          });
        }
        if( thiz.powerType === 1){
          thiz.machine2 = '';
          return indexData2({noLoading : notLoading , return_type:2}).then( res => {
            thiz.loadToastInfo = '到底了...';
            let list = res.data.list;
            thiz.for(list , (cur_mc , curindex) => {
              let good_deposit = cur_mc.good_deposit;
              list[curindex].base_power = Number(list[curindex].base_power);
              let newGooddeposit = {};
              thiz.for(good_deposit , (item , index)=> {
                newGooddeposit[item.pay_currency] = {
                  type : item.pay_currency,
                  price : Number(item.goods_deposit)
                };
                list[curindex].pays = newGooddeposit
              });
            });
            thiz.machine2 = list;
            if( list.length === 0 ){
              thiz.notMachine = true;
              thiz.showLoad = false;
            }
          }).catch( err =>{
            thiz.loadToastInfo = '到底了...';
          })
        }
      },
      selPower( index ){
        if( this.powerType != index){
          this.powerType = index;
          if( index == 2){
            //远程打开ipfs
            ipfsList().then(res => {
              if(res.code == 200){
                let url = res.data.url;
                window.location.href = url;
              }
            })
          }else{
            this.loadlist( false );
          }
        }
      },
      showVerify() {
        //显示校验弹窗
        let thiz = this;
        thiz.$refs.dl.dialogShow();
      },
      sure() {
        //校验/实名 弹窗点击确定
        let thiz = this, goPage = thiz.goPage , relNamePass = thiz.relNamePass;
        thiz.canScroll();
        switch (goPage) {
          case "/recharge":
            if (this.verFyCode === 2) {
              thiz.$router.push({path: '/chose_foreign', query: {rechargeVerify: true}});//rechargeVerify为判读是否是充值校验，还是实名验证
            }if (this.verFyCode === 3) {
              thiz.$router.push({path: goPage});
            }
            break;
          default :
            thiz.rechargeAjax(function () {
              if( relNamePass != -1 ){ // -1为审核中状态，不需要跳转页面
                if(thiz.verFyCode === 1){
                  let query = { rechargeVerify : false };
                  if( thiz.userName ){
                    query.userName  = thiz.userName;
                    query.userIdCard = thiz.userIdCard;
                  }
                  thiz.$router.push({path: '/china_verification' , query : query});
                }else{
                  thiz.$router.push({path: '/chose_foreign'});
                }
              }
            });

        }
      },
      cancel() {
        //弹窗点击取消
        this.canScroll();
      },
      relNameAjax( callback ){
        let thiz = this;
        isRelNameVerify({ noToast : true}).then( res => {
          let code = Number(res.code);//判断是否需要实名
          switch(code){
            //实名认证: 0未通过(必须去实名)， 1 已通过， -1 审核中  2未实名审核
            case 609:
              thiz.relNamePass = 2 ; break;// 2未实名审核
            case 602:
              thiz.relNamePass = -1 ; break; //-1 审核中
            case 614:
              thiz.relNamePass = 0 ; break;//实名认证: 0未通过(必须去实名)，
            case 200:
              let data = res.data;
              thiz.relNamePass = Number(data.status);
              thiz.userName = data.name;
              thiz.userIdCard = data.id_num;
              break;
          }
          if(callback){
            callback();
          }
        });
      },
      rechargeAjax( callback ){
        let thiz = this;
        ifNeedRechargeVerfy({noToast : true}).then(res => {
          //是否充值校验的类型 // 1已实名 ， 3新手未下单，弹窗提示实名(不用必须去实名)   2未实名（必须实名）
          thiz.verFyCode = Number(res.data) || 2;
          if(callback){
            callback();
          }
        });
      },
      openWin(name) {
        //充值 提现 银行卡 点击
        let thiz = this;
        this.goPage = name;
        switch (name) {
          case '/recharge': /*充值*/
            thiz.rechargeAjax(function () {
              if( thiz.verFyCode == 1 ){
                thiz.$router.push({path: name});
              } else{
                thiz.$refs.dl.changeToast('为保障您的账户安全，操作之前请先进行充值校验');
                thiz.showVerify();
              }
            });
            break;
          default: /*银行卡 ， 提现*/
            thiz.relNameAjax( function () {
              //实名认证: 1 已通过， -1 审核中  2未实名审核(必须去实名)  0未通过(必须去实名)，
              let relNamePass = thiz.relNamePass;
              if( relNamePass === 1){
                thiz.$router.push({path: name, query: {notCash: true}});
              } else{
                let notice = relNamePass === -1 ? '实名认证正在审核中，请等待审核结果后操作' : '为保障您的账户安全，操作之前请先进行实名认证';
                thiz.$refs.dl.changeToast(notice);
                thiz.showVerify();
              }
            });
        }
      },
      shareLink() {
        /*分享复制链接*/
        require('../../common/js/copy').copy({id: '#sharecopy', toast: '分享链接复制成功^_^'});
      },
      scrollBottom() {
        let thiz = this;
        // this.toBottom(function () {
        //   thiz.showsetting = false;
        // });
      },
      setting() {
        this.$router.push({path: '/setting' , query : {inviter_code : this.$store.state.inviter_code}});
      },
      notOpenBhpayShowDialog(){
        let thiz = this;
        let html = '<div style="line-height: 170%;font-size: 0.28rem">应平台合规需要，BTC_BHP合约产出的BHP，已在<span style="color: #ffd203">2019年12月30日</span>迁移到BHPay钱包中发放，为确保您的产出正常发放，请下载APP完成BHPay账户关联。</div>';
        thiz.$refs.dl2.changeContent(html);
        thiz.$refs.dl2.dialogShow();
      },
      openDialog( param ){
        let thiz = this;
        bhpayMes({noToast : true}).then( res => {
          if( res.code == 200 ){
            let data = res.data || false;
            if( data && JSON.stringify(data) != '{}' ){
              thiz.$router.push(param);//已绑定bhpay
            } else{
              thiz.notOpenBhpayShowDialog();//无账户
            }
          }else{
            thiz.notOpenBhpayShowDialog(); //无账户
          }
        });
      },
      openDialogOrdinary(param){
        let thiz = this;
        bhpayMes({noToast : true}).then( res => {
          if( res.code == 200 ){
            let data = res.data || false;
            if( data && JSON.stringify(data) != '{}' ){
              thiz.$router.push(param);//已绑定bhpay
            } else{
              thiz.notOpenBhpayShowDialog();//无账户
            }
          }else{
            thiz.notOpenBhpayShowDialog(); //无账户
          }
        });
      },
    },
    destroyed() {
      //let thiz = this;
      // window.removeEventListener('scroll',function () {thiz.showsetting = false;},true);
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  .notList{
    text-align: center;padding: 2rem 0;
    img{
      width: 5.12rem;
    }
  }
  .swiper-pagination{
    height: 0.25rem;display: flex; flex-direction: row; align-items: center; justify-content: center;bottom: 0;
  }
  .swiper-pagination /deep/ .my-bullet{
    width: 0.3rem;height: 0.03rem; margin-left: 0.15rem;
    background: #fff; display: inline-block; border-radius: 0;
  }
  .swiper-pagination /deep/ .my-bullet-active{
    display: block;
    background: #ffd203;
  }
  .share{
    padding-top: 0.32rem;
  }
  .sec1 {
    background: #fff; padding-top: 0; position: relative;
    >.money{
      padding-top: 0.34rem;overflow: hidden;
      >a{
        display: inline-block;float: left;width: calc( 50% - 0.125rem );font-size: 0;
        >img{
          width: 100%;
        }
      }
      >a:last-child{
        float: right;
      }
    }
  }
  #selPowerType{
    padding: 0rem 0.3rem;overflow: hidden;
    >span{
      color: #999999;font-size: 0.28rem;padding: 0.36rem 0;display: inline-block;text-align: center;
    }
    >.active>span{
      color: #262626;position: relative;
    }
    >.active>span:after{
      content: '';display: inline-block;width: 100%;height: 0.04rem;background: #FFDA34;position: absolute;z-index: 1;left: 0;bottom: -0.14rem;
    }
  }
  .login {
    padding: 0.26rem 0rem;overflow: hidden;font-size: 0.24rem;
  }

  .loginlink {
    display: inline-block;float: right;border-radius: 0.04rem;background: #F5F5F5;width: 1.5rem;height: 0.54rem;line-height: 0.54rem;font-family: PingFang-SC-Medium;
  }

  .settingicon {
    height: 0.44rem;width: 0.44rem;float: right;
  }

  .settingAccount {
    overflow: hidden;position: absolute;right: 0.3rem;top: 1.1rem;background: #fff;border-radius: 0.04rem;z-index: 2;height: 1.8rem;

    a {
      display: block;height: 0.9rem;line-height: .9rem;text-align: left;font-size: .28rem;padding: 0 .5rem;min-width: 100%;
    }
  }

  #seenotice {
    display: inline-block;float: left;width: calc(100% - 0.8rem);margin-top: 0.11rem;
    img {
      height: 0.29rem;float: left;font-size: 0;margin-right: 0.15rem;
    }

    /*.swiper-container, .swiper-slide {*/
    /*  height: 0.32rem;*/
    /*}*/

    .swiper-slide {
      overflow: hidden;
    }
    .tonotice {
      display: inline-block;overflow: hidden;width: 100%;text-overflow: ellipsis;white-space: nowrap;
    }
    .tonotice {
      height: 0.5rem;line-height: 0.55rem;position: absolute;left: 0;top: -0.11rem;
    }

    .swiper-container {
      float: left;font-size: 0.28rem;width: 3rem;margin:0;height: 0.32rem;
    }

    .seeMore {
      color: #898989;font-size: 0.24rem;line-height: 0.29rem;display: inline-block;margin-left: 0.22rem;
    }
  }

  #swipercontainer {
    .swiper-wrapper {
      height: 2.84rem;width: 100%;overflow: hidden;
      .swiper-slide {
        width: 100%;height: 100%;
        a{
          display: inline-block;width: 100%;height: 100%;
        }
        img {
          width: 100%;min-height: 100%;
        }
      }
    }

    .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
      height: 2.84rem;width: 100%;
    }
  }

  .tabbar {
    overflow: hidden;padding: 0.26rem 0.25rem 0rem 0.25rem;
    a {
      display: inline-block;text-align: center;font-size: 0.24rem;min-width: 1.05rem;
      p:first-child {
        font-size: 0
      }

      p > img {
        width: 0.6rem;height: 0.6rem;font-size: 0;
      }

      p:last-child {
        padding-top: 0.15rem
      }
    }
    &.tabbar2{
      padding-top: 0.28rem;
      a {
        text-align: center;
        >  p {
          > img{
            width: 0.44rem;height: 0.44rem;
          }
        }
      }
    }
  }

  .share > img {
    width: 100%;
  }

  .powerList {
    padding: 0.3rem;padding-bottom: 1.28rem;padding-top: 0.1rem;
    .nameLogo{
      height: 0.3rem;
    }
    li {
      padding-bottom: 0.3rem;

      > div {
        background: #fff;border-radius: 0.15rem;overflow: hidden;padding: 0.18rem 0.25rem;padding-bottom: 0.35rem;box-sizing: border-box;position: relative;padding-top: 0.35rem;
      }
      >div>.sellOver{
        display: inline-block;position: absolute;z-index: 1;width: 1.6rem;height: 1.25rem;background: url("../../common/imgs/sellover.png") center center no-repeat;
        right: 0.18rem;top: 0.13rem;background-size: 100% 100%;
      }
      .unit{
        width: 100%;overflow: hidden;padding-top: 0.3rem;
        >span{
          padding-top: 0.16rem;color: #595959;
          .unit{
            font-size: 0.18rem;
          }
        }
        >span:nth-child(2n+1){
          float: left;width: 45%;
        }
        >span:nth-child(2n+2){
          float: right;width: 55%;text-align: right;
        }
      }
      .listLeft {
        float: left;text-align: left;width: 100%;
      }
    }

    li:last-child {
      padding-bottom: 0;
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.25s ease;
  }

  .fade-enter, .fade-leave-to {
    height: 0;
  }

  .listRight {
    float: right;
    // height: 100%;
  }

  .rentBtn {
    background: #FFD203;text-align: center;padding: 0.2rem 0.25rem;border-radius: 0.3rem;font-size: 0.24rem;position: absolute;right: .2rem;top: 0.44rem;
  }
  .listbox2{
    .rentBtn{
      top:0.44rem;bottom: auto;
    }
    .listLeft{
      width: 100%;
    }
    .unit{
      overflow: hidden;
      >span:last-child{
        float: right;
        >span{
          font-size: 0.18rem
        }
      }
    }
  }

  .rentTwoDrug {
    text-align: center;width: 1.5rem;padding: 0.2rem 0;border-radius: 0.3rem;font-size: 0.24rem;position: absolute;right: .32rem;bottom: 0.35rem;background: #285fff;color: #fff;
  }

  .powerName {
    font-size: 0.3rem;font-family: PingFang-SC-Bold;text-align: left;line-height: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;width: 75%;
  }

  .drugTime {
    color: #9B9B9B;font-size: .22rem;font-family: PingFang-SC-Regular;padding-top: 0.21rem;
  }

  .unit {
    color: #262626;font-size: .22rem;font-family: PingFang-SC-Regular;padding-top: .4rem;text-align: left
  }
</style>
